<template>
  <el-card>
    <div class="wish-search" style="float:left">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="formInline.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="祈愿人">
          <el-input v-model="formInline.prayer" placeholder="请输入祈愿人"></el-input>
        </el-form-item>
         <el-form-item label="祈愿内容">
          <el-input v-model="formInline.content" placeholder="请输入祈愿内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(formInline)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="wish-table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="id" label="序号" width="50">
        </el-table-column>
        <el-table-column fixed prop="title" label="标题" width="150">
        </el-table-column>
        <el-table-column prop="prayer" label="祈愿人" width="100">
        </el-table-column>
        <el-table-column prop="content" label="祈愿内容">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="100">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="100">
        </el-table-column>
        <el-table-column prop="position" label="祈愿方位" width="150">
        </el-table-column>
        <el-table-column prop="data" label="祈愿时间" width="150">
        </el-table-column>
        <el-table-column prop="intensity" label="强烈度" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-popconfirm
            confirmButtonText='删除'
            cancelButtonText='取消'
            icon="el-icon-info"
            iconColor="red"
            title="确定要删除吗？"
            @onConfirm="del(scope.row)"
          >
            <el-button type="text" slot="reference" size="small" @click="delData">删除</el-button>
          </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float:left;margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40">
      </el-pagination>
    </div>
    <div class="wish-modal">
      <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
        <el-form :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item label="序号">
            <el-input v-model="formData.id" ></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="formData.title" ></el-input>
          </el-form-item>
          <el-form-item label="祈愿人">
            <el-input v-model="formData.prayer" ></el-input>
          </el-form-item>
          <el-form-item label="祈愿内容">
            <el-input v-model="formData.content"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="formData.gender" ></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="formData.age" ></el-input>
          </el-form-item>
          <el-form-item label="祈愿方位">
            <el-input v-model="formData.position"></el-input>
          </el-form-item>
          <el-form-item label="祈愿时间">
            <el-input v-model="formData.data" ></el-input>
          </el-form-item>
          <el-form-item label="强烈度">
            <el-input v-model="formData.intensity" ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: '001',
        title: '祈福',
        prayer: '朱武征',
        content: '一夜暴富，身边美女如云',
        gender: '男',
        age: '22',
        position: '浙江省嘉兴市',
        data: '2020-10-09 20:21',
        intensity: '强'
      },
      {
        id: '002',
        title: '发财',
        prayer: '陈冲',
        content: '一夜暴富',
        gender: '男',
        age: '22',
        position: '浙江省嘉兴市',
        data: '2020-10-09 20:21',
        intensity: '强'
      },
      {
        id: '003',
        title: '成绩',
        prayer: '张立飞',
        content: '考个好成绩',
        gender: '男',
        age: '22',
        position: '浙江省嘉兴市',
        data: '2020-10-09 20:21',
        intensity: '强'
      }],
      formInline: {
        title: '',
        prayer: '',
        content: ''
      },
      formData: {
        id: '',
        title: '',
        prayer: '',
        content: '',
        gender: '',
        age: '',
        position: '',
        data: '',
        intensity: ''
      },
      currentPage: 10,
      dialogVisible: false,
      visible: false
    }
  },
  methods: {
    handleClick(row) {
      this.dialogVisible = true
      this.formData = { ...row }
    },
    delData() {
      this.visible = true
    },
    del(row) {
      console.log('row', row)
    },
    onSubmit(e) {
      this.formInline = e
      console.log('e', e)
    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    },
    handleClose() {
      this.dialogVisible = false
    }
  },
  computed: {

  }
}

</script>

<style lang="less" scoped>
/deep/.el-table th > .cell {
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}
.el-card {
  position: relative;
  height: 90%;
  text-align: center;
  // background: url(../assets/img/cen.jpg) no-repeat center #fff;
  background-size: contain;
  margin: 20px 0 0;
}
</style>>
